<template>
  <el-container id="app">
    <el-header style="height:70px;">
      <img alt="Vue logo" src="@/assets/logo2.png" style="display:inline-block;vertical-align:middle; height:100%;">
      <ul class="aya-legend el-menu el-menu--horizontal" style="float:right;">
        <li class="el-menu-item">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              {{$store.state.username?$store.state.username:'选择用户'}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="liruonan">曏小強</el-dropdown-item>
              <el-dropdown-item command="liyuyang">李雨阳</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </li>
        <li class="el-menu-item">
          <el-badge :value="123" :max="99" :hidden="false" style="line-height:1;">
            <i class="el-icon-bell"></i>
          </el-badge>
        </li>
        <li class="el-menu-item"><i class="el-icon-menu"></i></li>
        <li class="el-menu-item"><i class="el-icon-search"></i></li>
        <li class="el-menu-item" style="padding:0;"><el-button type="text" @click="logout">退出</el-button></li>
      </ul>
      <el-menu default-active="1" mode="horizontal" class="aya-el-menu" style="float:right;">
        <el-menu-item index="1"><router-link to="/" slot="title">集团门户</router-link></el-menu-item>
        <el-menu-item index="3"><router-link to="/personal" slot="title">个人门户</router-link></el-menu-item>
      </el-menu>
    </el-header>
    <router-view />
    <Footer></Footer>
  </el-container>
</template>
<script>
import Footer from "@/components/Footer.vue";
export default {
  components: { Footer },
  methods: {
    handleCommand(command) {
      this.$axios
        .get("http://localhost:8081/user/" + command)
        .then(response => {
          let { userid, alias } = response.data;
          this.$store.state.userid = userid;
          this.$store.state.username = alias;
        })
        .catch(errors => {
          console.warn(errors);
        });
    },
    logout() {
      this.$store.state.userid = "aya";
      this.$store.state.username = "";
    }
  }
};
</script>
<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // 头部Header
  & > header {
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    // 头部导航
    & > .aya-el-menu {
      border: none;
      & > .el-menu-item {
        height: 50px;
        padding: 0 !important;
        & > a {
          padding: 0 10px;
        }
      }
    }
  }
}
header::after {
  display: inline-block;
  content: "";
  height: 100%;
  vertical-align: middle;
}
ul {
  list-style: none;
  padding: 0;
}
a {
  display: inline-block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.el-row {
  padding-top: 10px;
}
footer {
  text-align: center;
}
</style>
